<template>
  <div>
    <a-row type="flex" class="msg">
      <a-col :span="10" style="position: relative;">
        <!-- <p class="tl cp" @click="Ttap(0)">
          <a-icon type="left" />
        </p>
        <p class="tr cp" @click="Ttap(1)">
          <a-icon type="right" />
        </p>-->
        <a-carousel
          ref="carousel"
          arrows
          dotsClass="slick-dots slick-thumb"
          dotPosition="top"
          :autoplay="true"
          :dots="false"
        >
          <!-- <a slot="customPaging" slot-scope="props">装备</a> -->

          <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
            <a-icon type="left-circle" />
          </div>
          <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
            <a-icon type="right-circle" />
          </div>

          <img v-for="(item,index) in list.image" :key="index" :src="item" alt srcset />
        </a-carousel>
      </a-col>
      <a-col :span="13">
        <div class="msg-t-name">{{list.title}}</div>
        <div class="msg-t-item">商品类型： {{list.type_cate}}</div>
        <div class="msg-t-item">{{list.type_game}} {{list.twow}} {{list.wow}}</div>
        <div class="msg-t-item">
          卖家：
          <span>{{seller.name}}</span> &nbsp;&nbsp;
        </div>
        <!-- <div>
          保障类型：
          <div
            class="msg-t-bz-f"
            :class="promptIdx == 0 ? 'msg-t-bz-fhover ' : ''"
            @mousemove="move(0)"
          >
            <span>找</span>
          </div>
          <div
            class="msg-t-bz-f"
            :class="promptIdx == 1 ? 'msg-t-bz-fhover ' : ''"
            @mousemove="move(1)"
          >
            <span>图</span>
          </div>
          <div class="msg-t-bz-prompt">
            <span>图</span>找回包赔：卖家承诺30天内商品找回全额赔付
          </div>
        </div>-->
        <div class="price">￥{{list.price}}</div>
        <div class="btn">
          <a-button @click="jump" :disabled="list.sold != 1">立即购买</a-button>
          <div class="btn-prompt">温馨提示：购买后，官方通道直接修改账号信息</div>
        </div>
      </a-col>
      <a-col :span="24" class="datas">
        <a-col :span="3"></a-col>
        <a-col :span="3" v-if="!collect">
          <span @click="onCollect('add')">
            <img src="~/static/x0.png" alt /> 收藏
          </span>
        </a-col>
        <a-col :span="3" v-else>
          <span @click="onCollect('del')">
            <img src="~/static/x1.png" alt /> 已收藏
          </span>
        </a-col>
        <a-col :span="3" v-if="list.sold == 0">已下架</a-col>
        <a-col :span="3" v-if="list.sold == 1">出售中</a-col>
        <a-col :span="3" v-if="list.sold == 2">已出售</a-col>
        <a-col :span="12" style="text-align:right;"></a-col>
      </a-col>
    </a-row>
    <div class="msg">
      <a-row type="flex" class="msg-bhead">
        <a-col :span="2" class="cp" :class="msgIdx == 0 ? 'selects' : ''" @click="bhTag(0)">商品详情</a-col>
        <a-col :span="2" class="cp" :class="msgIdx == 1 ? 'selects' : ''" @click="bhTag(1)">商品留言</a-col>
      </a-row>
      <div v-if="!msgIdx">
        <div>
          【操作系统】：
          <span v-if="list.system == 0">pc</span>
          <span v-if="list.system == 2">苹果</span>
          <span v-if="list.system == 1">安卓</span>
        </div>
        <div>【游戏区服】：{{list.type_game}} {{list.twow}} {{list.wow}}</div>
        <div>【商品名称】：{{list.title}}</div>
        <div>【商品类型】：{{list.type_cate}}</div>
        <div>【发布时间】：{{list.create_time}}</div>
        <div
          v-for="(item,index) in list.info"
          :key="index"
        >【{{Object.keys(item)[0]}}】：{{item[Object.keys(item)[0]]}}</div>
        <div class="msgImg">
          <div class="msgImgt">图片详情</div>
          <p v-for="(item,index) in list.image" :key="index">
            <img :src="item" alt srcset />
          </p>
        </div>
      </div>
      <div v-else>
        <div class="language-t">
          <span class="cp" @click="()=>{visible=true}">发布留言</span>
          <a-modal title="发布留言" v-model="visible" @ok="handleOk">
            <a-form :form="form" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
              <a-form-item label="留言">
                <a-textarea
                  placeholder="输入留言"
                  :rows="6"
                  v-decorator="['test', { rules: [{ required: true, message: '请输入留言!' }] }]"
                />
              </a-form-item>
            </a-form>
          </a-modal>
        </div>
        <a-list itemLayout="horizontal" :dataSource="message">
          <a-list-item slot="renderItem" slot-scope="item">
            <a-list-item-meta>
              <img slot="avatar" :src="item.icon" class="avatars" />
              <a-row slot="title" type="flex" justify="space-between">
                <a-col :span="21">{{item.name}}评论</a-col>
                <a-col :span="3">{{item.create_time}}</a-col>
              </a-row>
              <a-row slot="description" type="flex" justify="space-between">
                <a-col :span="21">{{item.test}}</a-col>
                <!-- <a-col :span="3" style="text-align:right;">查看详情</a-col> -->
              </a-row>
            </a-list-item-meta>
          </a-list-item>
        </a-list>
        <div class="pagination">
          <a-pagination showQuickJumper v-model="page" :total="total" @change="onChange" />
        </div>
        <!-- <div class="language-e">暂无留言！</div>
        -->
      </div>
    </div>
  </div>
</template>

<script>
import { GET_SHOP, ADD_MESSAGE, IS_COLLECT, ADD_COLLECT } from "../../server";
export default {
  layout: "main",

  data() {
    return {
      contents: "游戏列表msg",
      promptIdx: 0,
      msgIdx: 0,
      visible: false,
      form: this.$form.createForm(this, { name: "test" }),
      list: {},
      seller: {},
      message: [],
      page: 1,
      total: 1,
      collect: false
    };
  },
  created() {
    this.getShop();
    this.getCollect();
  },
  methods: {
    Ttap(v) {
      v ? this.$refs.carousel.next() : this.$refs.carousel.prev();
    },
    move(v) {
      this.promptIdx = v;
    },
    bhTag(v) {
      this.msgIdx = v;
    },
    jump() {
      if (!this.$store.state.member_id) {
        this.$store.commit("loginSoft", true);
        return;
      }
      this.$router.push({
        name: "game-list-msg-consignbuy",
        params: {
          consignbuy: this.$route.params.msg
        }
      });
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          if (!this.$store.state.member_id) {
            this.$store.commit("loginSoft", true);
            return;
          }
          ADD_MESSAGE({
            game_id: this.$route.params.msg,
            test: this.form.getFieldValue("test")
          }).then(res => {
            if (!res) return;
            this.$message.success(res.msg);
            this.visible = false;
            this.form.setFieldsValue({
              test: ""
            });
            this.getShop();
          });
        }
      });
    },
    onChange(page) {
      this.page = page;
      this.getShop();
    },
    getShop() {
      GET_SHOP({
        game_id: this.$route.params.msg,
        page: this.page,
        pageshow: 10
      }).then(res => {
        if (!res) return;
        res.data.list.image = res.data.list.image.split(",");
        this.list = res.data.list;
        this.seller = res.data.seller;
        this.message = res.data.message;
        this.total = res.data.count;
        this.list.info = JSON.parse(this.list.info);
      });
    },
    getCollect() {
      IS_COLLECT({
        game_id: this.$route.params.msg
      }).then(res => {
        if (!res) return;

        this.collect = res.data === 1;
      });
    },
    onCollect(type) {
      if (!this.$store.state.member_id) {
        this.$store.commit("loginSoft", true);
        return;
      }
      ADD_COLLECT({
        game_id: this.$route.params.msg,
        type
      }).then(res => {
        if (!res) return;
        this.$message.success(res.msg);
        this.getCollect();
      });
    }
  }
};
</script>
<style lang="less" scoped>
.msg {
  border: 1px solid #e8e8e8;
  padding: 18px;
  .msgImg {
    margin: 18px -18px;
    text-align: center;
    .msgImgt {
      height: 34px;
      line-height: 34px;
      padding-left: 20px;
      background: #e8e8e8;
      font-size: 16px;
      text-align: left;
      margin-bottom: 18px;
    }
    img {
      width: 800px;
      margin-bottom: 18px;
    }
  }
  &:last-child {
    margin-top: 20px;
  }
  .tl {
    position: absolute;
    top: -8px;
    left: 0;
    font-size: 16px;
  }
  .tr {
    position: absolute;
    top: -8px;
    right: 52px;
    font-size: 16px;
  }
  &/deep/.ant-carousel {
    width: 430px;
    height: 430px;
    margin-top: 20px;
    img {
      width: 430px;
      height: 430px;
    }
    &/deep/.custom-slick-arrow {
      width: 32px;
      height: 32px;
      font-size: 32px;
      color: #fff;
      background-color: rgba(31, 45, 61, 0.11);
      opacity: 0.6;
    }
    &/deep/.custom-slick-arrow:before {
      display: none;
    }
    &/deep/.custom-slick-arrow:hover {
      opacity: 1;
    }
    &/deep/.slick-slide h3 {
      color: #fff;
    }
    &/deep/.slick-dots {
      top: -26px;
    }
    &/deep/.slick-thumb li {
      height: 16px;
      line-height: 16px;
      padding: 0 6px;
      box-sizing: border-box;
      border-right: 1px solid #333;
    }
    &/deep/.slick-thumb li:last-child {
      border: 0;
    }
    &/deep/.slick-thumb li a {
      color: #333;
    }
    &/deep/.slick-thumb .slick-active a {
      color: #0084ff !important;
    }
    &/deep/.slick-slide-t {
      top: 2px;
    }
  }
  .msg-t-name {
    font-size: 18px;
    font-weight: bold;
    margin: 20px 0;
    span {
      color: #6c66cc;
    }
  }
  .msg-t-item {
    height: 32px;
  }
  .msg-t-bz-f {
    display: inline-block;
    padding: 4px;

    span {
      display: inline-block;
      padding: 0 4px;
      background: #0084ff;
      color: #fff;
      border-radius: 5px;
    }
  }
  .msg-t-bz-fhover {
    border: 1px solid #0084ff;
    border-bottom: 0;
    background: #fff;
  }
  .msg-t-bz-prompt {
    width: 320px;
    border: 1px solid #0084ff;
    padding: 8px;
    z-index: -1;
    margin-top: -1px;
    span {
      display: inline-block;
      padding: 0 4px;
      background: #0084ff;
      color: #fff;
      border-radius: 5px;
      margin-right: 8px;
    }
  }
  .price {
    font-weight: 700;
    font-size: 26px;
    color: #0084ff;
    padding: 50px 0 42px 0;
    border-bottom: 1px dashed #f6f6f6;
  }
  .btn {
    padding-top: 50px;
    &/deep/.ant-btn:first-child {
      width: 188px;
      height: 42px;
      color: #fff;
      background: #0084ff;
      border: 0;
      margin-right: 14px;
    }
    &/deep/ .ant-btn {
      width: 146px;
      height: 42px;
      color: #fff;
      background: #ff9f18;
      border: 0;
    }
    .btn-prompt {
      margin-top: 10px;
      font-size: 12px;
      color: #999;
    }
  }
  .datas {
    margin: 42px 0 32px 0;
    color: #999;
    span {
      cursor: pointer;
      img {
        margin-top: -5px;
      }
    }
  }
  .msg-bhead {
    height: 42px;
    line-height: 42px;
    text-align: center;
    background: #f6f6f6;
    border-bottom: 1px solid #e8e8e8;
    margin: -18px -18px 22px -18px;
    font-size: 16px;
  }
  .selects {
    background: #fff;
    color: #0084ff;
    border-top: 1px solid #0084ff;
  }
  .language-t {
    height: 42px;
    line-height: 42px;
    text-align: right;
    background: #f6f6f6;
    span {
      display: inline-block;
      width: 70px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      color: #fff;
      background: #0084ff;
      margin-right: 12px;
      font-size: 12px;
    }
  }
  .language-e {
    height: 34px;
    line-height: 52px;
    text-align: center;
  }
  .avatars {
    width: 46px;
    height: 46px;
    border-radius: 50%;
  }
}
.pagination {
  margin: 100px auto;
  text-align: center;
}
</style>